<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>店铺详情</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/shopdetails.css"/>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
</head>
<body>
    <div class="container" id="returnindex">
        <div class="row">
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="goodsmanage"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="ordermanage"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"><a href="index.html">返回首页</a></div>
        </div>
    </div>
    <div class="container" id="pagetitle">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><p id="titlep"><span>乐享生活</span>&nbsp;店铺详情</p></div>
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <div class="row" id="shopinformation">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="loadshop"></div>
                </div>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
        </div>
    </div>
    <div class="container" id="insearch">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" id="inshopsearch">
                本店搜索：<input type="text" id="search"><button id="commit">搜索</button>
            </div>
        </div>
    </div>
    <div class="container" id = "goodslisttitle">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" id="listtitle">
                <p>所有商品</p>
            </div>
        </div>
    </div>

    <div class="container" id="goodslistbody"></div>

    <script type="text/javascript">

        var shopid = location.search.split("=")[1].split("&")[0];

        var page = location.search.split("=")[2];

        var userId = $.cookie("userId");

        $.post("shop/findById",{shopid:shopid},function (data) {

            data = JSON.parse(data);

            var ht = '<img id="shophs" src='+ "/FVOnline/shop/getHS?userId=" + data.userId +'>';
            $("#loadshop").html(ht);
            
            if (data.userId == userId){

                $("#goodsmanage").html('<a id="gotogoodsmanage">商品管理</a>');
                $("#ordermanage").html('<a id="gotoordermanage">订单管理</a>');

                $("#gotogoodsmanage").click(function () {
                    location.href = "goodsmanage.html?shopid=" + shopid + "&page=1";
                });

                $("#gotoordermanage").click(function () {
                    location.href = "ordermanage.html?shopid=" + shopid + "&page=1";
                });

            }
        });


        $.post("goods/getPageGoods",{shopid:shopid,page:page,pageSize:24},function (data) {

           data =  JSON.parse(data);
           
           var ht = '';

            for (var i = 1; i <= Math.ceil((data.goods.length/6)); i++) {

                ht += '<div class="row goodsrow">\n' +
                    '       <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>\n' +
                    '       <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">\n' +
                    '           <div class="row">\n';

                for (var j = (i-1)*6; j < i*6 && j < data.goods.length; j++) {

                    ht += '<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 divclick" id="divclick_'+ data.goods[j].id +'">\n' +
                        '       <img src="/FVOnline/goods/getImg?goodsId='+ data.goods[j].id +'">\n' +
                        '       <p class="price">￥'+ data.goods[j].price +'<span>'+ data.goods[j].sellnum +'人付款</span></p>\n' +
                        '       <a class="details" href="goodsdetails.html?goodsid='+ data.goods[j].id +'">'+ data.goods[j].goodsname +'&nbsp;&nbsp;'+ data.goods[j].details +'</a>\n' +
                        '  </div>\n';
                }

                ht += '     </div>\n' +
                    '   </div>\n' +
                    '</div>\n';
            }

            ht += '<div id="pageinfo">共'+ Math.ceil(data.total/8) +'页，当前为第'+ page +'页<button id="prev">上一页</button><button id="next">下一页</button>第<input type="text" id="pageto" oninput = "value = value.replace(/[^\\d]/g,\'\')")>页<button id="goto">跳转</button></div>'

            $("#goodslistbody").html(ht);

            for (var i = 0; i < data.goods.length; i++) {
                $("#divclick_" + data.goods[i].id).click(function () {
                    var id = this.id.split("_")[1];
                    location.href = "goodsdetails.html?goodsid=" + id;
                });
            }

            $("#prev").click(function () {
                if (page != 1){
                    location.href = "shopdetails.html?shopid=" + shopid + "&page=" + (parseInt(page) - 1);
                }
            });

            $("#next").click(function () {
                if (page != Math.ceil(data.total/8)){
                    location.href = "shopdetails.html?shopid=" + shopid + "&page=" + (parseInt(page) + 1);
                }
            });

            $("#goto").click(function () {
                var topage = $("#pageto").val()
                if (topage > 0 && topage <= Math.ceil(data.total/8)) {
                    location.href = "shopdetails.html?shopid=" + shopid + "&page=" + topage;
                }
            });
        });


        $("#commit").click(function () {

            var name = $("#search").val();
            findByName(1,name);

        });


        function findByName(page,name){

            $("#search").val(name);

            $.post("goods/getByName",{shopid:shopid,page:page,pageSize:24,goodsname:name},function (data) {

                data =  JSON.parse(data);

                var ht = '';

                for (var i = 1; i <= Math.ceil((data.goods.length/6)); i++) {

                    ht += '<div class="row goodsrow">\n' +
                        '       <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>\n' +
                        '       <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">\n' +
                        '           <div class="row">\n';

                    for (var j = (i-1)*6; j < i*6 && j < data.goods.length; j++) {

                        ht += '<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 divclick" id="divclick_'+ data.goods[j].id +'">\n' +
                            '       <img src="/FVOnline/goods/getImg?goodsId='+ data.goods[j].id +'">\n' +
                            '       <p class="price">￥'+ data.goods[j].price +'<span>'+ data.goods[j].sellnum +'人付款</span></p>\n' +
                            '       <a class="details" href="goodsdetails.html?goodsid='+ data.goods[j].id +'">'+ data.goods[j].goodsname +'&nbsp;&nbsp;'+ data.goods[j].details +'</a>\n' +
                            '  </div>\n';
                    }

                    ht += '     </div>\n' +
                        '   </div>\n' +
                        '</div>\n';
                }

                ht += '<div id="pageinfo">共'+ Math.ceil(data.total/8) +'页，当前为第'+ page +'页<button id="prev">上一页</button><button id="next">下一页</button>第<input type="text" id="pageto" oninput = "value = value.replace(/[^\\d]/g,\'\')")>页<button id="goto">跳转</button></div>'

                $("#goodslistbody").html(ht);

                for (var i = 0; i < data.goods.length; i++) {
                    $("#divclick_" + data.goods[i].id).click(function () {
                        var id = this.id.split("_")[1];
                        location.href = "goodsdetails.html?goodsid=" + id;
                    });
                }

                $("#prev").click(function () {
                    if (page != 1){
                        findByName((parseInt(page) - 1),name);
                    }
                });

                $("#next").click(function () {
                    if (page != Math.ceil(data.total/8)){
                        findByName((parseInt(page) + 1),name);
                   }
                });

                $("#goto").click(function () {
                    var topage = $("#pageto").val()
                    if (topage > 0 && topage <= Math.ceil(data.total/8)) {
                        findByName(topage,name);
                    }
                });
            });
        };



    </script>
</body>
</html>